<template>
  <view class="shopdetail">
    <!-- 适配状态栏 -->
    <view class="status_bar"></view>
    <!-- #ifndef MP-WEIXIN-->
    <!-- 小程序不需要返回（自带） -->
    <view class="back_button" @click="leftClick"
      ><text class="custom-icon custom-icon-jiantou2"></text
    ></view>
    <!-- #endif -->
    <view class="swiper_box">
      <swiper class="swiper" circular>
        <swiper-item v-for="(item, index) in data.img_list" :key="index">
          <image
            class="img"
            :src="item.path"
            @click="openImage(index)"
          ></image>
          <view class="showPage">{{
            index + 1 + " / " + data.img_list.length
          }}</view>
        </swiper-item>
      </swiper>
      <view class="countdown" v-if="timestamp"
        >距结束
        <u-count-down
          class="time"
          :show-days="true"
          :timestamp="timestamp"
          separator="zh"
          color="#fff"
          separator-color="#fff"
          bg-color="#3f3f3f"
        ></u-count-down>
      </view>
    </view>
    <view class="shopdescibe">
      <view class="">
        <view class="tags flex-middle">
          <text class="tag" v-if="data.datum_activity">{{
            data.datum_activity
          }}</text>
          <block v-if="data.datum_activity == '满减'">
            <view
              class="tag rule"
              v-for="(item, index) in data.full_activity_rule"
              :key="index"
            >
              满{{ item.price }}减{{ item.reduce }}</view
            >
          </block>
          <view
            class="tag gift"
            v-if="data.datum_activity == '满赠'"
            @click="showGiftList = !showGiftList"
          >
            <text class="over"
              >满{{ data.full_activity_rule[0].price }}送
              <template v-for="good in data.full_activity_rule[0].goods"
                >{{ good.goods_name }}{{ good.num
                }}{{ good.spu_name }}、</template
              >
            </text>
            <u-icon
              class="icon"
              :name="showGiftList ? 'arrow-down' : 'arrow-up'"
            ></u-icon>
            <block v-show="showGiftList">
              <view
                class="giftLists"
                v-for="(item, index) in data.full_activity_rule"
                :key="index"
              >
                <view class="list"
                  >满{{ item.price }}送
                  <block v-for="good in item.goods" :key="good.goods_name"
                    >{{ good.goods_name }}{{ good.num }}{{ good.spu_name }}、
                  </block>
                </view>
                <!-- <view class="list">满100送AD钙奶x1、康师傅桶面、卫龙辣条x1</view> -->
              </view>
            </block>
          </view>
        </view>
        <view class="content">
          <view class="price">
            ￥<text class="num">{{ (showPrice || "").replace("￥", "") }}</text
            ><text class="spu">/{{ unit }}</text>
            <!-- <text class="discount">￥{{ purchase_price }}/{{ unit }}</text> -->
          </view>
          <text class="title">{{ data.name }}</text>
          <view>{{ describe }}</view>
        </view>
        <view class="content tip">
          <view style="margin-bottom: 10rpx"
            ><text class="prompt">配送</text>订单审核完成后24小时内发货</view
          >
          <view
            ><text class="prompt">服务</text
            >品质保证,生鲜不支持7天无理由退货</view
          >
        </view>
        <view class="content">
          <view class="flex-btw" @click="showSpecselector">
            <text>已选&nbsp;{{ willBuyNum + "/" + unit }}</text>
            <image
              style="width: 24rpx; height: 24rpx"
              src="../../static/images/right.png"
            ></image>
          </view>
        </view>
      </view>
      <!-- <view class="content specs">
        <view class="specs_title"> 规格信息 </view>
        <view class="specs_info">
          <view class="specs_info_view">
            <view class="specs_info_view_head">产地</view>
            <view class="specs_info_view_name">江西</view>
          </view>
          <view class="specs_info_view">
            <view class="specs_info_view_head">规格</view>
            <view class="specs_info_view_name">180g+/份</view>
          </view>
          <view class="specs_info_view">
            <view class="specs_info_view_head">保质期</view>
            <view class="specs_info_view_name">30天</view>
          </view>
          <view class="specs_info_view">
            <view class="specs_info_view_head">储存方式</view>
            <view class="specs_info_view_name">冷藏</view>
          </view>
        </view>
      </view> -->
    </view>
    <view class="twelve_font content">
      <!-- <rich-text :nodes="data.detail" type = 'node'></rich-text> -->
      <rich-text :nodes="info"></rich-text>
    </view>
    <!-- </scroll-view> -->
    <view class="buy flex-around">
      <div class="buy_icon" @click="collectAction">
        <image
          class="img"
          :src="is_collect ? cartImgs : cartImg"
          mode=""
        ></image>
        <text>{{ is_collect ? "已收藏" : "收藏" }}</text>
      </div>
      <!-- <div class="buy_icon">
				<image class="img" :src="shartImg" @click="shart" style="width: 38rpx;height: 38rpx;"></image>
				<text>分享</text>
			</div> -->
      <view class="buy_button" @click="showSpecselector">加入购物车</view>
      <!-- <view class="buy_button color" @click="showimmediately">立即购买</view> -->
    </view>
    <my-keyboard @confirm="inputPrice" ref="keyboard"></my-keyboard>
    <u-mask :show="showMask"></u-mask>
    <my-specselector
      ref="specselector"
      @tabBarTag="changeTabBarTag"
      :immediately="immediately"
      @checkedAll="checkedAll"
    ></my-specselector>
    <my-shart ref="shart"></my-shart>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
import parseHtml from "@/static/js/parseHtml.js";
import MixinShowprice from "@/static/js/mixinshowprice.js";
export default {
  computed: {
    ...mapState(["companyInfo"]),
  },
  data() {
    return {
      loginVolid: null, //是否强制登录
      checked: 0,
      isCollect: 1,
      spuId: null, //规格id
      imgList: [],
      // detail:'',
      info: [],
      data: {},
      index: null,
      min: 0, //起订量
      max: 0, //库存
      limit: 0,
      showPrice: 0, //显示的价格
      oldPrice: null,
      unit: 0, //显示的单位
      is_collect: 0,
      willBuyNum: null,
      purchase_price: 0,
      describe: "",
      cartImg: "../../static/images/shouc.svg",
      cartImgs: "../../static/images/yishouc.svg",
      shartImg: "../../static/images/fengxian.png",
      current_price: null,
      showMask: false,
      showGiftList: false,
      timestamp: 0, //倒计时
      options: {}, // 路由传来的信息
      immediately: false,
    };
  },
  mixins: [MixinShowprice],
  onReady() {
    getApp().setTitle();
  },
  onLoad(options) {
    this.options = options;
    this.loginVolid = !Boolean(
      uni.getStorageSync("loginVolid").is_login_category
    );
    this.getData(options.id, options.company_id);
  },
  onUnload() {
    uni.$emit("updateclassify", () => {});
  },
  methods: {
    getData(id, company_id) {
      $https(
        "GET",
        "goodsDetail",
        {
          goods_id: id,
          company_id: company_id,
        },
        (res) => {
          if (res.data.errcode == 0) {
            if (res.data.data.spu.length < 1) {
              uni.showToast({
                icon: "none",
                title: "该商品已下架或被删除",
                success: () => {
                  setTimeout(() => {
                    this.leftClick();
                    return;
                  }, 2000);
                },
              });
            }
            this.data = res.data.data;
            let infos = this.formatRichText(this.data.detail);
            this.info = parseHtml(infos);
            this.describe = this.data.spu[0].describe || "";
            this.showPrice = this.data.spu[0].current_price
              ? "时价"
              : this.data.spu[0].activity_price
              ? `￥${this.data.spu[0].activity_price}`
              : `￥${this.data.spu[0].market_price}`;
            this.oldPrice = this.data.spu[0].activity_price
              ? this.data.spu[0].market_price
              : null;
            this.unit = this.data.spu[0].unit;
            this.min = this.data.spu[0].minimum;
            this.purchase_price = this.data.spu[0].purchase_price;
            this.limit = this.data.spu[0].inventory_hd
              ? 1
              : this.data.spu[0].designated_inventory;
            this.max =
              this.data.spu[0].inventory_hd || this.data.spu[0].inventory_left; //活动库存优先
            this.spuId = this.data.spu[0].id;
            this.willBuyNum = this.data.spu[0].cart_num
              ? this.data.spu[0].cart_num
              : this.data.spu[0].minimum
              ? this.data.spu[0].minimum
              : 1;
            this.is_collect = this.data.is_collect;
            this.current_price = this.data.spu[0].current_price;
            if (this.data.full_activity_rule.length > 0) {
              //满减满赠
            } else {
              this.timestamp = this.data.panic_buy.end_time;
              var now = (new Date().getTime() / 1000).toFixed(0);
              this.timestamp =
                this.data.panic_buy.status == 1
                  ? this.data.panic_buy.end_time - now
                  : this.data.panic_buy.end_time - now;
            }
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.errmsg,
              success: () => {
                this.showMask = true;
                setTimeout(() => {
                  this.leftClick();
                }, 2000);
              },
            });
          }
        },
        this.loginVolid
      );
    },
    leftClick() {
      // 获取当前页面栈的信息
      const pages = getCurrentPages();

      // 获取当前页面的路径
      const currentPage = pages[pages.length - 1].route;

      // 打印当前页面路径
      this.$store.commit("changeCurrentRoute", currentPage);
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    // 加入购物车
    showSpecselector() {
      this.$refs.specselector.open(this.data);
      this.immediately = false;
    },
    // 立即购买
    showimmediately() {
      // this.$refs.specselector.open(this.data);
      // this.immediately = true;
      uni.showToast({
        title: "功能开发中.....",
        icon: "none",
      });
    },

    openImage(e) {
      uni.previewImage({
        urls: this.data.img_list.map((item) => item.path),
        current: e,
      });
    },

    checkedAll(data) {
      // console.log("data111", data);
      this.changeSpe(data);
    },

    //选择规格
    changeSpe(index) {
      this.spuId = this.data.spu[index].id;
      this.willBuyNum = this.data.spu[index].cart_num
        ? this.data.spu[index].cart_num
        : this.data.spu[index].minimum;
      this.checked = index;
      this.min = this.data.spu[index].minimum;
      this.limit = this.data.spu[index].inventory_hd
        ? 1
        : this.data.spu[index].designated_inventory;
      this.max =
        this.data.spu[index].inventory_hd ||
        this.data.spu[index].inventory_left;
      this.showPrice = this.data.spu[index].current_price
        ? "时价"
        : this.data.spu[index].activity_price
        ? `￥${this.data.spu[index].activity_price}`
        : `￥${this.data.spu[index].market_price}`;
      this.oldPrice = this.data.spu[index].activity_price
        ? this.data.spu[index].market_price
        : null;
      this.unit = this.data.spu[index].unit;
      this.describe = this.data.spu[index].describe || "";
      this.current_price = this.data.spu[index].current_price;
    },
    //＋
    addAction(data) {
      var val = data.value,
        min = Number(this.min),
        max = Number(this.max),
        limit = Number(this.limit);
      if (val < min) {
        val = min;
      } else if (limit > 0 && val + 1 >= max) {
        //不能超过库存量
        val = max;
        uni.showToast({
          icon: "none",
          title: "库存不足",
        });
      } else {
        val++;
      }
      this.willBuyNum = Number(val.toFixed(2));
    },
    //-
    subAction(data) {
      var val = data.value;

      if (val - 1 < Number(this.min)) {
        val = 0;
      } else {
        val--;
      }
      this.willBuyNum = Number(val.toFixed(2));
    },
    //输入数量
    inputPrice(data) {
      this.willBuyNum = Number(Number(data.value).toFixed(2));
    },
    // 分享
    shart() {
      this.$refs.shart.open();
    },
    //加入购物车
    addToCart() {
      if (this.willBuyNum > 0) {
        var options = {
          goods_id: this.data.id,
          spu_id: this.spuId,
          num: this.willBuyNum,
        };
        $https(
          "POST",
          `changeCart?company_id=${this.companyInfo.supplier_id}`,
          options,
          (res) => {
            if (res.data.errcode == 0) {
              uni.showToast({
                title: "成功加入购物车",
                icon: "none",
              });
              // this.$refs.tabar.changetag(res.data.data.all_cart_num);
            } else {
              uni.showToast({
                title: res.data.errmsg,
                icon: "none",
              });
            }
          }
        );
      } else {
        uni.showToast({
          title: "请选择数量",
          icon: "none",
        });
      }
    },
    // toBuy(){

    // 	uni.navigateTo({
    // 		url: `/pages/shopcart/submitorder?ids=[${this.data.id}]`
    // 	})
    // },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
      );
      return newContent;
    },
    //加入收藏
    collectAction() {
      let status = this.is_collect == 1 ? 0 : 1;
      $https(
        "GETN",
        "collection",
        {
          status,
          goods_id: this.data.id,
          company_id: this.companyInfo.supplier_id,
        },
        (res) => {
          if (res.data.errcode == 0) {
            this.is_collect = status;
            uni.showToast({
              title: `${this.is_collect == 1 ? "已收藏" : "取消收藏"}`,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: `${res.data}`,
              icon: "none",
            });
          }
        }
      );
    },
    // 加入购物车修改数量
    changeTabBarTag(data) {
      this.getData(this.options.id, this.options.company_id);
      this.$refs.tabar.changetag(data);
      // willBuyNum  unit
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-drawer {
  overflow: unset !important;
}

page {
  background: $white;
}

.specs {
  &_title {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  &_info {
    margin-top: 30rpx;
    background: #ffffff;
    border: 1rpx solid #ececec;
    border-bottom: none;
    border-radius: 12rpx;
    &_view {
      display: flex;
      box-sizing: border-box;
      border-bottom: 1rpx solid #ececec;
      &_head {
        height: 70rpx;
        line-height: 70rpx;
        padding-left: 20rpx;
        width: 156rpx;
        background: #f8f9fa;
        border-right: 1rpx solid #ececec;
      }
      &_name {
        flex: 1;
        height: 70rpx;
        line-height: 70rpx;
        padding-left: 20rpx;
      }
    }
  }
}

.content {
  padding: 35rpx 25rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: $color_85;
}

.title {
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  margin: 10rpx 0;
}

.prompt {
  color: $color_55;
  margin-right: 20rpx;
}

.tip {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: $color_85;
  letter-spacing: 2rpx;
}
.price {
  font-size: 22rpx;
  color: #f55726;
  font-family: PingFang SC;
  font-weight: bold;
  .num {
    font-size: 46rpx;
  }
  .spu {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.swiper_box {
  position: relative;

  .countdown {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #3f3f3f;
    color: #fff;
    padding: 16rpx 24rpx;
    font-size: 24rpx;
    border-radius: 0 40rpx 40rpx 0;

    .time {
      margin-left: 20rpx;
    }
  }

  .swiper {
    height: 484rpx;
    .img {
      width: 100%;
      height: 100%;
      // background:pink;
    }
    .showPage {
      position: absolute;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 6rpx 18rpx;
      right: 30rpx;
      top: 410rpx;
      border-radius: 50rpx;
    }
  }
}

.describe {
  /deep/img {
    width: 100%;
  }
}

// @media(max-width:600px) {
.shopdetail {
  .tags {
    margin-bottom: 8rpx;

    .tag {
      display: inline-block;
      font-size: 22rpx;
      padding: 2rpx 10rpx;
      // transform: scale(0.8);
      color: #fff;
      background: #f7c23e;
      border-radius: 8rpx;
      margin-right: 12rpx;
      white-space: nowrap;

      &.rule {
        border: 1px solid #f7c23e;
        color: #f7c23e;
        background: none;
      }

      &.gift {
        position: relative;
        padding-right: 50rpx;
        display: flex;
        background: none;
        border: 1px solid #f7c23e;
        color: #f7c23e;
        margin-right: 0;

        .over {
          // display: inline-block;
          max-width: 440rpx;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .icon {
          position: absolute;
          right: 0;
          margin: 4rpx 8rpx;
          font-size: 30rpx;
          vertical-align: baseline;
        }

        .giftLists {
          position: absolute;
          top: 46rpx;
          left: 0;
          right: 0;
          color: #747474;
          background: #fff;
          box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.2);
          border-radius: 0px 0px 6rpx 6rpx;
          z-index: 99;

          .list {
            padding: 12rpx 24rpx;
            white-space: pre-wrap;

            + .list {
              border-top: 1px solid #f3f3f3;
            }
          }
        }
      }
    }
  }

  .shop_logo {
    position: absolute;
    width: 192rpx;
    height: 116rpx;
    right: 40rpx;
    z-index: 9;
  }

  .custom-icon-xingxing {
    font-size: 44rpx;
  }

  .english_name {
    margin-top: 10rpx;
  }

  .shop_name {
    font-size: 36rpx;
    margin-right: 20rpx;
  }

  .describe {
    margin: 40rpx 0;
  }

  .add_to_cart,
  .buy_now {
    width: 280rpx;
    height: 80rpx;
    line-height: 80rpx;
  }

  .add_to_cart {
    width: 560rpx;
    border-radius: 200rpx;
  }

  .buy_now {
    border-radius: 0 200rpx 200rpx 0;
  }

  .shopdescibe {
    padding: 20rpx 20rpx 0;
    box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.07);
    transform: translate3d(0, 0, 0);
    background-color: #f8f9fa;
    padding-bottom: 1rpx;
    .desc {
      color: #737373;
      padding: 20rpx 0px 40rpx 0px;
    }

    .yellow_tag {
      font-size: 20rpx;
      padding: 2rpx 12rpx;
      background: #ff9900;
      border-radius: 6rpx;
      color: #fff;
    }
  }

  .back_button {
    margin-top: var(--status-bar-height);

    .custom-icon {
      font-size: 40rpx;
      margin-left: 20rpx;
    }
  }

  .buy_num {
    padding-bottom: 20rpx;

    .buynum {
      margin-top: 20rpx;

      > text {
        margin-right: 30rpx;
      }
    }

    .old_price {
      color: #ccc;
      margin-left: 10rpx;
      text-decoration: line-through;
    }
  }

  .select_ware {
    margin-top: 32rpx;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #e7e8e8;

    text {
      padding: 0 10rpx;
    }

    .active {
      border-radius: 50rpx;
    }

    .spec {
      min-width: 100rpx;
      padding: 10rpx 24rpx;
      text-align: center;
    }
  }
}

// }

.shopdetail {
  background: #fff;
  padding-bottom: 120rpx;

  .back_button {
    position: fixed;
    z-index: 9;
    height: 44px;
    line-height: 44px;
  }

  .collect {
    flex-direction: column;
    white-space: nowrap;
  }

  .back_button .custom-icon {
    color: black;
    font-weight: bold;
  }

  .active {
    background: $dgreen;
    color: $white;
  }

  .add_to_cart {
    background: $dgreen;
  }

  .buy_now {
    background: $dgreen;
  }

  .add_to_cart,
  .buy_now {
    color: $white;
    text-align: center;
  }

  .describe {
    color: #737373;
  }

  .buy_num {
    // border-bottom: 1px solid #e7e8e8;
  }

  .buy {
    position: fixed;
    padding: 20rpx;
    background: $white;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-around;
    &_icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      text {
        margin-top: 10rpx;
        font-size: 18rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .img {
        width: 40rpx;
        height: 35rpx;
        position: relative;
        top: 8rpx;
      }
    }
    &_button {
      width: 600rpx;
      height: 70rpx;
      line-height: 70rpx;
      background: #40ae36;
      border-radius: 35rpx;
      text-align: center;
      color: #ffffff;
    }
    & .color {
      background-color: #f55726;
    }
  }
}
.discount {
  font-size: 22rpx;
  color: #cccccc;
  text-decoration: line-through;
}
</style>
